<template>
  <CommonDialog
    :dialogShow.sync="dialogShow"
    :title="curRow?.id ? '编辑球员' : '新增球员'"
  >
    <template #content>
      <el-form :model="playerForm" label-width="80px" :rules="rules" class="playerForm">
        <el-form-item label="姓名：" prop="name">
          <common-input v-model="playerForm.name" placeholder="请输入姓名"></common-input>
        </el-form-item>
        <el-form-item label="年龄：" prop="age">
          <common-input v-model="playerForm.age" placeholder="请输入年龄"></common-input>
        </el-form-item>
        <el-form-item label="身高：" prop="height">
          <common-input
            v-model="playerForm.height"
            placeholder="请输入身高"
          ></common-input>
        </el-form-item>
        <el-form-item label="体重：" prop="weight">
          <common-input
            v-model="playerForm.weight"
            placeholder="请输入体重"
          ></common-input>
        </el-form-item>
        <el-form-item label="手机号：" prop="phone">
          <common-input
            v-model="playerForm.phone"
            placeholder="请输入手机号"
          ></common-input>
        </el-form-item>
        <el-form-item label="班级：" prop="class">
          <common-input
            v-model="playerForm.class"
            placeholder="请输入班级"
          ></common-input>
        </el-form-item>
        <el-form-item label="年级：" prop="classLevel">
          <common-select
            v-model="playerForm.classLevel"
            :options="levelOptions"
            placeholder="请选择年级"
          ></common-select>
        </el-form-item>
      </el-form>
    </template>
  </CommonDialog>
</template>

<script>
export default {
  props: {
    changeDialog: {
      typeof: Boolean,
      default: false,
    },
    curRow: {
      typeof: Object,
      default: () => {
        return {
          id: "",
        };
      },
    },
  },
  created() {
    const keys = Object.keys(this.curRow);
    console.log(keys);
    keys.forEach((key) => {
      this.playerForm[key] = this.curRow[key];
    });
  },
  data() {
    return {
      playerForm: {
        name: "",
        age: "",
        height: "",
        weight: "",
        phone: "",
        classLevel: "",
        class: "",
      },
      levelOptions: [
        {
          label: "大一",
          value: "0",
        },
        {
          label: "大二",
          value: "1",
        },
        {
          label: "大三",
          value: "2",
        },
        {
          label: "大四",
          value: "3",
        },
      ],
      rules: {},
    };
  },
  computed: {
    dialogShow: {
      get() {
        return this.changeDialog;
      },
      set(v) {
        this.$emit("update:changeDialog", v);
      },
    },
  },
  mounted() {},

  methods: {},
};
</script>
<style lang="less" scoped>
.playerForm {
  color: red;
  ::v-deep {
    .el-form-item__label {
      color: #333;
      font-size: 16px;
      font-weight: medium;
    }
    .el-input {
      width: 380px !important;
    }
  }
}
</style>
